<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirmLoading="loading"
      :isdouble="isdouble"
      :Personnel="Personnel"
      width="1000px"
      @cancel="() => $emit('cancel')"
      :footer="false"
    >
      <div>
        <a-row>
          <a-col class="expert" :md="6" :sm="6">
            <a-tree
              style="height: 400px; overflow: auto"
              :selectedKeys.sync="selectedKeys"
              :replaceFields="Modifyfield"
              @select="getTableData"
              :tree-data="org"
              default-expand-all
            ></a-tree>
          </a-col>
          <a-col :md="1" :sm="1"></a-col>
          <a-col :md="17" :sm="17">
            <a-row>
              <a-col :md="24" style="margin-bottom: 12px">
                <a-input-search
                  placeholder="员工名称/电话号码/员工编号"
                  v-model.trim="content"
                  @search="onSearch"
                ></a-input-search>
              </a-col>
            </a-row>
            <div v-if="showAdd">
              <a-button v-show="isAdd" type="primary" style="margin-bottom: 10px" @click="getExternal"
                >添加外部人员</a-button
              >
              <a-row type="flex" style="margin: 10px 0" v-show="!isAdd">
                <BaseInput
                  style="width: 30%"
                  v-model="outside"
                  placeholder="请输入外部参与人员"
                  :maxLength="maxLength"
                  @change="editError"
                ></BaseInput>
                <a-button type="primary" style="margin-left: 20px" @click="getOutside">添加</a-button>
                <a-button style="margin-left: 20px" @click="cancel">取消</a-button>
              </a-row>
            </div>
            <p v-show="addError" style="margin: 10px 90px; color: red">请填写正确名称！</p>
            <s-table
              ref="table"
              size="default"
              rowKey="id"
              :columns="columns"
              :scroll="{ y: 260 }"
              :data="loadData"
              :alert="true"
              :pageKeys="['pageNumber', 'pageSize']"
              show-size-changer
              show-quick-jumper
              showPagination="auto"
            >
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="handleAdd(record)">添加</a>
                </template>
              </span>
            </s-table>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import { getCustOrgTree } from '@/api/subassembly/TreeSelectOrganization'
import { getOneOrgUsers } from '@/api/commons.js'

const columns = [
  {
    title: '员工名称',
    dataIndex: 'name',
  },
  {
    title: '员工编号',
    dataIndex: 'jobNum',
  },
  {
    title: '电话号码',
    dataIndex: 'phoneNum',
  },
  {
    title: '职称',
    dataIndex: 'jobTitle',
  },
  {
    title: '操作',
    width: '100px',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  data() {
    return {
      Modifyfield: {
        children: 'children',
        title: 'label',
        key: 'id',
      },
      personnelTable: [],
      ID: undefined,
      columns: columns,
      queryParam: {},
      loadData: (parameter) => {
        this.queryParam.rootOrgId = this.selectedKeys[0]
        // this.queryParam.scienceOrNot = 2
        let args = Object.assign({}, parameter, this.queryParam)
        return getOneOrgUsers(args).then((res) => {
          return {
            data: res.list,
            currentPage: parameter.pageNumber,
            totalPage: Math.ceil(res.total / parameter.pageSize),
            totalSize: res.total,
            pageSize: parameter.pageSize,
          }
        })
      },
      selectedKeys: [],
      isAdd: true,
      maxLength: 10,
      outside: undefined,
      // Personnel: [],
      doublePersonnelList: [],
      content: undefined,
      addError: false,
      org: [],
    }
  },
  computed: {
    Personnel: {
      get: function () {
        return this.list
      },
      set: function (e) {
        this.$emit('update:list', e)
      },
    },
  },
  components: {
    STable,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
      default: () => '添加参与人',
    },
    isdouble: {
      type: Boolean,
      default: () => false,
    },
    showAdd: {
      type: Boolean,
      default: () => true,
    },
  },
  created() {

    getCustOrgTree({
      containTags: this.$store.getters['GET_ORGLABEL'].map(item => item.code),
      baseOrgType:0, 
      systemOrgType: 1, 
      containVirtual: 1,
    }).then((res) => {
      if (res.data && res.data.length > 0) {
        this.org = res.data
        this.ID = res.data[0].id
        // this.selectedKeys = [res.data[0].id]
      }
    })
  },
  methods: {
    handleAdd(record) {
      if (!this.$props.isdouble) {
        if (this.Personnel.some((item) => item.employeeId == record.id || item.id == record.id)) {
          this.$message.warning('此人员已添加过！')
          return
        }
        this.Personnel.push({
          employeeName: record.employeeName || record.name,
          employeeId: record.employeeId || record.id,
        })
        this.$emit('addJoinPersonnel', this.Personnel)
        this.$message.success('已添加')
      } else {
        if (this.doublePersonnelList.some((item) => item.employeeName == record.name)) {
          this.$message.warning('此人员已添加过！')
          return
        }
        this.doublePersonnelList.push({
          employeeName: record.employeeName || record.name,
        })
        this.$emit('addDoublePersonnel', this.doublePersonnelList)
        this.$message.success('已添加')
      }
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    getTableData(selectedKeys, info) {
      this.ID = info.selectedNodes[0].data.props.id
      this.onSearch()
    },
    getExternal() {
      this.isAdd = false
    },
    cancel() {
      this.isAdd = true
    },
    getOutside() {
      let regexp = /^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/ //姓名正则
      if (this.Personnel.some((item) => item.employeeName == this.outside)) {
        this.$message.warning('此人员已添加过！')
        return
      }
      if (!regexp.test(this.outside)) {
        this.addError = true
        return false
      }
      if (!this.$props.isdouble) {
        this.Personnel.push({
          employeeName: this.outside,
        })
        this.$emit('addJoinPersonnel', this.Personnel)
        this.$message.success('已添加')
        // this.outside = undefined
      } else {
        this.doublePersonnelList.push({
          name: this.outside,
        })
        this.$emit('addDoublePersonnel', this.doublePersonnelList)
        this.$message.success('已添加')
        // this.outside = undefined
      }
    },
    onSearch() {
      // let regexp = /^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/ //姓名正则
      // let mPattern = /^1[34578]\d{9}$/ //手机号正则
      // let posPattern = /^\d{3}$/ //用户编号正则
      // if (regexp.test(this.content)) {
      //   this.queryParam.name = this.content
      //   this.queryParam.phoneNum = this.queryParam.jobNum = undefined
      // }
      // if (mPattern.test(this.content)) {
      //   this.queryParam.phoneNum = this.content
      //   this.queryParam.name = this.queryParam.jobNum = undefined
      // }
      // if (posPattern.test(+this.content)) {
      //   this.queryParam.jobNum = this.content
      //   this.queryParam.name = this.queryParam.phoneNum = undefined
      // }
      this.queryParam.key = this.content
      this.$refs.table.refresh(true)
      // this.content = undefined
    },
    editError() {
      this.addError = false
    },
  },
}
</script>

<style lang='less'  scoped>
</style>
